/* Element Plus 电力蓝主题定制 */

/* 按钮主题 */
.el-button--primary {
  background: var(--gradient-primary) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  transition: var(--transition-normal) !important;
  box-shadow: var(--shadow-soft) !important;
  position: relative !important;
  overflow: hidden !important;
}

.el-button--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left var(--transition-slow);
}

.el-button--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-hover) !important;
  background: var(--gradient-electric) !important;
}

.el-button--primary:hover::before {
  left: 100%;
}

.el-button--primary:active {
  transform: translateY(0) !important;
}

/* 输入框主题 */
.el-input__wrapper {
  border-radius: var(--radius-md) !important;
  border: 2px solid rgba(0, 123, 255, 0.2) !important;
  background: white !important;
  transition: var(--transition-normal) !important;
  box-shadow: inset 0 2px 4px rgba(0, 123, 255, 0.05) !important;
}

.el-input__wrapper:hover {
  border-color: var(--primary-blue-light) !important;
  box-shadow: var(--shadow-soft) !important;
}

.el-input__wrapper.is-focus {
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
}

.el-input__inner {
  color: var(--dark-gray) !important;
  font-weight: 500 !important;
}

.el-input__inner::placeholder {
  color: var(--medium-gray) !important;
}

/* 选择器主题 */
.el-select .el-input__wrapper {
  border-radius: var(--radius-md) !important;
  border: 2px solid rgba(0, 123, 255, 0.2) !important;
  transition: var(--transition-normal) !important;
}

.el-select .el-input__wrapper:hover {
  border-color: var(--primary-blue-light) !important;
}

.el-select .el-input__wrapper.is-focus {
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
}

/* 下拉菜单主题 */
.el-select-dropdown {
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(0, 123, 255, 0.1) !important;
  box-shadow: var(--shadow-hover) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.el-select-dropdown__item {
  color: var(--dark-gray) !important;
  transition: var(--transition-normal) !important;
  border-radius: var(--radius-sm) !important;
  margin: 2px 4px !important;
}

.el-select-dropdown__item:hover {
  background: var(--gradient-card) !important;
  color: var(--primary-blue) !important;
}

.el-select-dropdown__item.selected {
  background: var(--gradient-primary) !important;
  color: white !important;
  font-weight: 600 !important;
}

/* 表格主题 */
.el-table {
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-soft) !important;
  border: 1px solid rgba(0, 123, 255, 0.1) !important;
}

.el-table__header {
  background: var(--gradient-primary) !important;
}

.el-table__header th {
  background: transparent !important;
  color: white !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.el-table__body tr {
  transition: var(--transition-normal) !important;
}

.el-table__body tr:hover {
  background: var(--gradient-card) !important;
}

.el-table__body td {
  border-bottom: 1px solid rgba(0, 123, 255, 0.1) !important;
  color: var(--dark-gray) !important;
}

/* 分页器主题 */
.el-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.el-pagination .el-pager li {
  border-radius: var(--radius-sm) !important;
  margin: 0 2px !important;
  transition: var(--transition-normal) !important;
  border: 1px solid rgba(0, 123, 255, 0.2) !important;
}

.el-pagination .el-pager li:hover {
  background: var(--gradient-card) !important;
  border-color: var(--primary-blue) !important;
  color: var(--primary-blue) !important;
}

.el-pagination .el-pager li.is-active {
  background: var(--gradient-primary) !important;
  border-color: var(--primary-blue) !important;
  color: white !important;
  font-weight: 600 !important;
}

.el-pagination .btn-prev,
.el-pagination .btn-next {
  border-radius: var(--radius-sm) !important;
  border: 1px solid rgba(0, 123, 255, 0.2) !important;
  transition: var(--transition-normal) !important;
}

.el-pagination .btn-prev:hover,
.el-pagination .btn-next:hover {
  background: var(--gradient-card) !important;
  border-color: var(--primary-blue) !important;
  color: var(--primary-blue) !important;
}

/* 对话框主题 - 完美居中 */
.el-dialog {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-hover) !important;
  border: 1px solid rgba(0, 123, 255, 0.1) !important;
  margin: 0 !important;
  position: relative !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  overflow: hidden !important;
}

/* 对话框容器 - 完美居中容器 */
.el-dialog__wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 确保对话框遮罩层正确显示 */
.el-overlay {
  z-index: 1999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

.el-dialog__header {
  background: var(--gradient-primary) !important;
  color: white !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 20px 24px 16px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.el-dialog__title {
  color: white !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 !important;
  word-break: break-word !important;
  text-transform: none !important;
  font-family: inherit !important;
  font-style: normal !important;
  font-variant: normal !important;
  font-stretch: normal !important;
  font-size-adjust: none !important;
}

.el-dialog__headerbtn .el-dialog__close {
  color: white !important;
  font-size: 16px !important;
  width: 20px !important;
  height: 20px !important;
}

.el-dialog__body {
  padding: var(--spacing-lg) !important;
  background: white !important;
}

.el-dialog__footer {
  padding: var(--spacing-lg) !important;
  background: var(--light-gray) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

/* 表单主题 */
.el-form-item__label {
  color: var(--primary-blue-dark) !important;
  font-weight: 600 !important;
}

.el-form-item__content {
  color: var(--dark-gray) !important;
}

/* 消息提示主题 */
.el-message {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-hover) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.el-message--success {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05)) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #059669 !important;
}

.el-message--error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05)) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #dc2626 !important;
}

.el-message--warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05)) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #d97706 !important;
}

.el-message--info {
  background: var(--gradient-card) !important;
  border: 1px solid rgba(0, 123, 255, 0.3) !important;
  color: var(--primary-blue) !important;
}

/* 加载主题 */
.el-loading-mask {
  background: rgba(245, 246, 250, 0.8) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.el-loading-spinner .circular {
  color: var(--primary-blue) !important;
}

/* 卡片主题 */
.el-card {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
  border: 1px solid rgba(0, 123, 255, 0.1) !important;
  transition: var(--transition-normal) !important;
}

.el-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: var(--primary-blue) !important;
}

.el-card__header {
  background: var(--gradient-card) !important;
  border-bottom: 1px solid rgba(0, 123, 255, 0.1) !important;
  color: var(--primary-blue-dark) !important;
  font-weight: 600 !important;
}

.el-card__body {
  background: white !important;
  color: var(--dark-gray) !important;
}

/* 响应式弹窗居中 */
@media (max-width: 768px) {
  .el-dialog {
    max-width: 95vw !important;
    max-height: 95vh !important;
    margin: 10px !important;
  }
}

@media (max-width: 480px) {
  .el-dialog {
    max-width: 98vw !important;
    max-height: 98vh !important;
    margin: 5px !important;
  }
}
